<template>
    <div>
        <el-dialog :visible.sync="visible" width="80%" center :before-close="handleClose" append-to-body
            :title="'请选择课件内容'">
            <!--            <el-row>-->
            <!--                <el-form :inline="true" ref="form" :model="form" label-width="66px" class="demo-form-inline" clo>-->
            <!--                    -->
            <!--                    <el-form-item prop="title">-->
            <!--                        <el-input size="mini" placeholder="输入教材/课件名称" v-model="form.title" clearable></el-input>-->
            <!--                    </el-form-item>-->
            <!--                    <el-form-item>-->
            <!--                        <el-button type="primary" @click="search" size="mini">筛选</el-button>-->
            <!--                    </el-form-item>-->
            <!--                </el-form>-->
            <!--            </el-row>-->
            <el-row>
                <el-row>
                    <div class="content">
                        <div class="content__item" v-for="(item, index) in tableData">
                            <div>
                                <p></p>
                                <div style="position: relative;display: inline-block;">
                                    <img :src="item.cover_url" alt="暂无图片"
                                        style="vertical-align: middle;width: 170px; height: 150px;position: relative;"
                                        @click="selectFiles(item)">
                                    <el-alert :title="showType(item.book_type)" type="success"
                                        style="width: 75px;height:22px;top:0;background-color: #00FFFE;text-align: center;color: black;position: absolute;left: 0;"
                                        :closable="false">
                                    </el-alert>
                                    <label class="checkbox-label8" :fileId="item.id" >
<!--                                        :class="multipleSelectionIdArr.includes(item.id) ? 'checked' : ''">-->
                                        <img src="@/assets/img/kanke/courseware/select.png" alt="暂无图片"
                                            style="width: 30px;height: 30px;">
                                    </label>
                                </div>
                                <p style="width: 169px;height: 63px;overflow: hidden;text-overflow:ellipsis;
                               display: -webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space: break-spaces;">
                                    {{ item.title }}
                                </p>
                            </div>
                        </div>
                    </div>
                </el-row>
                <!--                <div class="block">-->
                <!--                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"-->
                <!--                                   :current-page="pageInfo.pageNumber" :page-sizes="pageSizes" :page-size="pageInfo.pageSize"-->
                <!--                                   background layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">-->
                <!--                    </el-pagination>-->
                <!--                </div>-->
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose" size="small">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')" size="small">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import { pageSizes } from '@/constant/index.js'
import { getCourseDetail } from "@/api/kanke/textbook/coursewarepub";
export default {
    name: "ShowAddCoursewareContent",
    components: {
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        current_courseware_id: {
            //type:Number,
            default: 0
        },
        edit_task_courseware_arr: {
            type: Array,
            default() {
                return []
            }
        },
        current_courseware_info: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            loading: false,
            form: {
                book_type: '',
                is_folder: '',
                title: '',
            },
            pageInfo: {
                pageNumber: 1,
                pageSize: 10,
                total: 0
            },
            book_types: [
                { 'book_type': 1, 'book_name': '课本' },
                { 'book_type': 2, 'book_name': '视频' },
                { 'book_type': 3, 'book_name': 'PPT' },
                { 'book_type': 4, 'book_name': '音频' },
            ],
            multipleSelection: [],  //多选复选框
            multipleSelectionIdArr: [],
            tableData: [],
            type: 'book',
            pageSizes
        }
    },
    computed:{
      tmpTaskData(){
        return this.$store.state.assignTask.tmpTaskData;
      }
    },
    created() {
        this.init(true);
    },
    mounted() {
    },
    watch: {
        // edit_task_courseware_arr: {
        //     handler(val) {
        //         this.multipleSelection = [...val];
        //         this.multipleSelectionIdArr = val.map(item => item.content_id);
        //     },
        //     immediate: true
        // },
    },
    updated() {
      this.initSelectedFiles();
    },
    methods: {
        async init(initation = false) {

            this.loading = true;
            await getCourseDetail({ id: this.current_courseware_id }).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data
                    // this.pageInfo.total = res.data.total
                }
                this.loading = false
            })

        },
        //初始化选中的数据 选中状态
        initSelectedFiles(){

          console.log('-----init selected content data---',this.tmpTaskData);
          if(this.tmpTaskData.length > 0){

            let labelCheck = document.getElementsByClassName('checkbox-label8');
            for(let i = 0;i<this.tmpTaskData.length;i++){
              for (let j = 0; j < labelCheck.length; j++) {
                  console.log('--label select--',this.tmpTaskData[i].id+"---"+labelCheck[j].getAttribute('fileId'))
                  labelCheck[j].style.display = "none";
                  if(this.tmpTaskData[i].content_id == labelCheck[j].getAttribute('fileId')){
                    labelCheck[j].style.display = "block";
                    this.multipleSelectionIdArr.push(this.tmpTaskData[i].content_id);
                  }
              }
            }

          }else{

            let labelCheck = document.getElementsByClassName('checkbox-label8');
            for (let j = 0; j < labelCheck.length; j++) {
              labelCheck[j].style.display = "none";
            }

          }
        },
        search() {
            this.pageInfo.pageNumber = 1;
            this.init();
        },
        selectFiles(obj) {
          console.log('select content',obj);
          console.log('select content id',obj.id);
            //只能选择一个内容
            let labelCheck = document.getElementsByClassName('checkbox-label8');
            for (let j = 0; j < labelCheck.length; j++) {

                if( obj.id == labelCheck[j].getAttribute('fileId')){
                    console.log('all file id',labelCheck[j].getAttribute('fileId'));
                    if(this.multipleSelectionIdArr.includes(obj.id)){
                        labelCheck[j].style.display = "none";
                        console.log('select content-none',obj);
                        for(let i=0;i<this.multipleSelectionIdArr.length;i++){
                            if(this.multipleSelectionIdArr[i] == obj.id){
                              this.multipleSelectionIdArr.splice(i, 1);
                            }
                        }
                    }else{
                        console.log('select content-block',obj);
                        this.multipleSelectionIdArr.push(obj.id);
                        labelCheck[j].style.display = "block";
                    }
                    break;

                }

            }

            // 替换数字第一个元素
            // this.multipleSelectionIdArr.splice(0, 1, obj.id);
        },
        showType(book_type) {
            for (let i = 0; i < this.book_types.length; i++) {
                if (book_type == this.book_types[i].book_type) {
                    return this.book_types[i].book_name;
                }
            }
        },
        handleClose() {
            this.$emit('update:visible', false);
        },
        submitForm() {
            if (!this.multipleSelectionIdArr.length) {
                this.msgError('未选择任何文件,可以任务列表选择删除该任务'); return;
            }
            if(this.multipleSelectionIdArr.length > 1){
              this.msgError('仅能选择一个文件'); return;
            }
            let data = { ...this.current_courseware_info, content_id: this.multipleSelectionIdArr[0], };
            console.log('current_selected_courseware_content', data);
            this.$emit('HandleCoursewareSelectFile', data);
            this.$emit('update:visible', false);
        },
        handleSizeChange(val) {
            this.pageInfo.pageSize = val
            //this.init()
        },
        handleCurrentChange(val) {
            this.pageInfo.pageNumber = val
            this.init()
        }
    }
}
</script>
<style lang="scss" scoped>
.demo-form-inline {
    ::v-deep .el-select .el-input {
        width: 150px;
    }
}

::v-deep .el-alert {
    border-radius: 0;
}

.checkbox-label8 {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}

.checkbox-label8.checked {
    display: block;
}

::v-deep .el-dialog__header {
    background: #03A7EF;
}

.content {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    margin-bottom: 15px;
    min-height: 450px;

    &__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 20px;

        .title {
            margin-top: 10px;
        }
    }
}
</style>